<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>分类</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/divide.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<script>
    $(function () {
        dianji()

    })
    function Jump(users,comment_id){
        location.href="${pageContext.request.contextPath}/detailsListServlet?id="+users+"&comment_id="+comment_id;
    }
    function dianji(currentPage){
        var url = location.search;
        var code = "";
        if (url.indexOf("?") != -1) {    //是否有参数
            var str = url.substr(1);
            strs = str.split("=");
            code = strs[1];
        }
        console.log(currentPage)
        $.get("${pageContext.request.contextPath}/routeServlet",{currentPage:currentPage,classid:code,pageSize:4},function (date){
            console.log(date)
            //共几页，多少条
            $('#gong').html(date.totalPage);
            $('#duoshao').html(date.totalCount);
            //页码展示
            var lis="";
            var beforeNem=date.currentPage-1;
            if (beforeNem<=0){
                beforeNem=1
            }
            var firstPage='<li class="page-item" style="cursor: pointer" onclick="javascipt:dianji('+beforeNem+')"><a class="page-link" href="javascipt:dianji('+beforeNem+')" aria-label="Previous"> <span aria-hidden="true">&laquo;</span></a></li>'
            lis+=firstPage
            //定义开始位置，结束位置
            var being;
            var end;
            if (date.totalPage<10){
                //总页数不够10
                being=1
                end=date.totalPage
            }else {
                //总页数超过10
                being=date.currentPage-5
                end=date.currentPage+4
                //如果前面不够5个，后面要补齐10个
                if (being<1){
                    being=1
                    end=being+9
                }
                if (end>date.totalPage){
                    end=date.totalPage
                    being=end-9
                }
            }

            for (let i = being; i <= end; i++) {
                if (date.currentPage==i){
                    lis+="<li class='page-item active' id='keshiya'  style='cursor: pointer' onclick='javascipt:dianji("+i+")'><a class='page-link' >"+i+"</a></li>"
                }else {
                    lis+="<li class='page-item' id='keshiya' style='cursor: pointer' onclick='dianji("+i+")'><a class='page-link' >"+i+"</a></li>"
                }
            }
            var fnallforeNem=date.currentPage+1;

            if (fnallforeNem>=date.totalPage){
                fnallforeNem=date.totalPage
            }
            var lastPage='<li class="page-item" style="cursor: pointer" onclick="javascipt:dianji('+fnallforeNem+')"> <a class="page-link" href="javascipt:dianji('+fnallforeNem+')" aria-label="Next"> <span aria-hidden="true">&raquo;</span> </a> </li>'
            lis+=lastPage

            $('#zongyeshu').html(lis)



            //List数组展示

            var route_list="";

            for (let i = 0; i < date.list.length; i++) {
                var route= date.list[i]
                var li='<li onclick="Jump('+route.shopId+','+route.comment_id+')"><img class="home-img" style="width: 250px;height: 250px" src="'+route.home+'" alt=""> <div class="home-yang">'+route.name+'</div><div class="home-huobajia"><ol><li>￥'+route.price+'</li></ol></div></li>'
                route_list+=li
            }
            $("#zongye").html(route_list)
            window.scrollTo(300,300)
        })
    }
</script>
<body>
<%@include file="head.jsp"%>

<!-- 限时秒杀标题 -->
<div class="home-Waterfall">

</div>


<!-- 火爆热销 -->
<div class="home-rexiao">
    <ul>
        <li>商品分类</li>
        <li>这里都是您需要的商品类型！</li>
    </ul>
</div>

<!-- 火爆热销商品 -->

<div class="home-shagp">
    <ul id="zongye">

    </ul>
    <div style="width: 100%;height: 80px;">
        <div style="width: 200px;height: 100%;float: left;margin-left: 320px;line-height: 80px;text-align: center;font-weight: bold;font-size: 20px;">共有<span id="gong" style="color: red"> ${sessionScope.pd.totalPage} </span>页<span style="color: red" id="duoshao"> ${sessionScope.pd.totalCount} </span>条商品</div>
    </div>
    <nav style="margin-top: 20px" aria-label="Page navigation example">
        <ul id="zongyeshu" data-lenz="${sessionScope.pd.totalPage}" style="margin-left: 1400px;" class="pagination">

        </ul>
    </nav>

</div>


<div class="home-weibu">
    <div class="home-weibu1">
        <div class="home-weibu7"></div>
        <ul>
            <li><img src="img/尾部1.png" alt=""></li>
            <li>
                <div class="zitiyang">自营正品</div>
                <div class="kaixiang">正品保障 假一赔三</div>
            </li>
            <li>
                <img src="img/尾部2.png" alt="">

            </li>
            <li>
                <div class="zitiyang">自营正品</div>
                <div class="kaixiang">不限品类 满88免邮</div>
            </li>
            <li><img src="img/尾部3.png" alt=""></li>
            <li>
                <div class="zitiyang">闪电发货</div>
                <div class="kaixiang">极速发货 航空直达</div>
            </li>
            <li>
                <img src="img/尾部4.png" alt="">
            </li>
            <li>
                <div class="zitiyang">售后保障</div>
                <div class="kaixiang">开箱验货 30天退换</div>
            </li>
        </ul>
    </div>

    <div class="home-weibu2">
        <ul>
            <li>
                <div class="home-haoma">400-6699-840</div>
                <div>
                    <ol>
                        <li>周一到周日</li>
                        <li>09.00-22.00</li>
                    </ol>
                </div>
                <div>
                    <ol>
                        <li>关注我们</li>
                        <li><img src="img/尾部5.png"></li>
                        <li><img src="img/尾部6.png"></li>
                        <li><img src="img/尾部7.png"></li>
                    </ol></div>
            </li>
            <li>
                <div class="home-xiangtong">
                    <div>正品保障</div>
                    <div>30天无忧退换</div>
                    <div>消费者告知书</div>
                    <div>真假辨别</div>
                    <div>假货报道</div>
                    <div>正品保障</div>
                </div>
            </li>
            <li>
                <div class="home-xiangtong">
                    <div>新手指南</div>
                    <div>购物流程</div>
                    <div>会员级别</div>
                    <div>支付方式</div>
                    <div>回头币</div>
                    <div>评价晒单</div>
                </div>
            </li>
            <li>
                <div class="home-xiangtong">
                    <div>配送方式</div>
                    <div>物流查询</div>
                    <div>配送说明</div>
                    <div>防骗警示</div>
                    <div>配送时效</div>
                    <div>验货签收</div>
                </div>
            </li>
            <li>
                <div class="home-xiangtong">
                    <div>售后服务</div>
                    <div>退货运费</div>
                    <div>退货流程</div>
                    <div>退货政策</div>
                    <div>投诉建议</div>
                    <div>联系客服</div>
                </div>
            </li>
            <li>
                <div class="home-xiangtong">
                    <div>常见问题</div>
                    <div>账户问题</div>
                    <div>售后问题</div>
                    <div>配送问题</div>
                    <div>支付问题</div>
                    <div>常见问题</div>
                </div>
            </li>
            <li>
                <div class="home-erwei">
                    <img src="img/二维码.jpg" alt="">
                    <div>微信公众号</div>
                </div>
            </li>
            <li>
                <div class="home-erwei">
                    <img src="img/二维码.jpg" alt="">
                    <div>客服微信号</div>
                </div>
            </li>
        </ul>
    </div>

</div>


<!-- 尾部 -->
<div class="yang">
    <div class="yang-shi"></div>
    <ul>
        <li>网站简介</li>
        <li>联系我们</li>
        <li>招商合作</li>
        <li>用户协议</li>
        <li>隐私政策</li>
        <li>投诉建议</li>
    </ul>

    <p>Copyright 2012 - 2021 www.huitouyu.com. All rights reserved. 回头鱼商城版权所有</p>

    <div class="pao">
        <div class="pei"><img src="img/yin.png" alt=""></div>
        <div class="pei11"><img src="img/zhi.png" alt=""></div>
        <div class="pei11"><img src="img/wang.png" alt=""></div>
        <div class="pei11"><img src="img/zhong.png" alt=""></div>
        <div class="pei11"><img src="img/360.png" alt=""></div>
    </div>
</div>
</body>
</html>
